<template>
    <div class="top">
        <div style="width: 80%; float: left;">
            <el-menu class="routerList" mode="horizontal" :default-active="activeIndex" router>
                <el-menu-item index="/home" class="routerItem"><b>{{ $t('indexView.home') }}</b></el-menu-item>
                <el-menu-item index="/problems" class="routerItem"><b>{{ $t('indexView.problems') }}</b></el-menu-item>
                <el-menu-item index="/test" class="routerItem"><b>{{ $t('indexView.test') }}</b></el-menu-item>
                <el-menu-item index='/exam' class="routerItem"><b>{{ $t('indexView.exam') }}</b></el-menu-item>
                <el-menu-item index='/class' class="routerItem"><b>{{ $t('indexView.class') }}</b></el-menu-item>
            </el-menu>
        </div>
        <div @click="changeDark" class="icon">
            <div><el-icon size="30" v-if="dark">
                    <MoonNight />
                </el-icon></div>
            <div><el-icon size="30" v-if="!dark">
                    <Sunny />
                </el-icon></div>
        </div>
        <el-button class="buttom" mb-2 @click="toggle">{{ language }}</el-button>
        <el-dropdown placement="bottom">
            <el-button class="buttom"> {{ $t('indexView.fontChoose') }} </el-button>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="modifyFont('youyuan, sans-serif')">{{ $t('indexView.youyuan')
                    }}</el-dropdown-item>
                    <el-dropdown-item @click="modifyFont('cute, sans-serif')">{{ $t('indexView.cute') }}</el-dropdown-item>
                    <el-dropdown-item @click="modifyFont('pinyin, sans-serif')">{{ $t('indexView.pinyin')
                    }}</el-dropdown-item>
                    <el-dropdown-item @click="modifyFont('rosyClouds, sans-serif')">{{ $t('indexView.rosyClouds')
                    }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>

        <el-dropdown>
            <el-avatar shape="square" size="large"
                :src="userInfo?.avatar?(config.API_URL+'/'+userInfo.avatar):'https://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=https%3A%2F%2Fwx3.sinaimg.cn%2Fmw690%2F006WYq6ngy1hrnbjfvr1oj30u00u0q3p.jpg&thumburl=https%3A%2F%2Fimg0.baidu.com%2Fit%2Fu%3D870975181%2C849440641%26fm%3D253%26fmt%3Dauto%26app%3D120%26f%3DJPEG%3Fw%3D500%26h%3D500'" />
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="$router.push('/admin')">管理界面</el-dropdown-item>
                    <el-dropdown-item @click="$router.push(`/user/${loginUserId}`)">个人中心</el-dropdown-item>
                </el-dropdown-menu>
            </template>

        </el-dropdown>

    </div>

    <div style="clear: both;">
        <RouterView></RouterView>
    </div>
</template>

<script setup lang="ts">
import useLanguage from '@/hooks/useLanguage';
import useDark from '@/hooks/useDark';
import useMenu from '@/hooks/useMenu';
import { onMounted,inject } from 'vue';
import { ElMessage } from 'element-plus';
import router from '@/router';
import useUser from '@/hooks/useUser';
import Config from '@/types/config';
const { language, toggle, modifyFont } = useLanguage();
const { dark, changeDark } = useDark();
const { activeIndex, handleSelect } = useMenu();
const loginUserId = localStorage.getItem("loginUserId");
const {userInfo,getUserInfo}=useUser()

const config:Config = inject('$config');
onMounted(() => {
    if (loginUserId === null || loginUserId === undefined) {
        ElMessage('登录失效,请重新登录')
        router.push('/login')
    }else{
        getUserInfo(loginUserId)
    }

    
})
</script>


<style>
html,
body,
#app {
    height: 100%;
    margin: 0;
    padding: 0;
    margin: 0;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
}

::-webkit-scrollbar {
    display: none;
}
</style>

<style scoped>
.top {
    gap: 1%;
    height: 57px;
    box-shadow: 0 15px 10px -10px rgba(84, 83, 83, 0.5);
    display: flex;
    width: 1510px;

}

.icon {
    margin-left: 4%;
    margin-top: 15px;
    /* float: left; */
    cursor: pointer;
    transition: color 0.3s ease;
}

.icon:hover {
    color: lightcoral;
}

.buttom {
    font-family: inherit;
    width: 90px;
    height: 40px;
    margin-top: 10px;
    margin-left: 5px;
}

.routerList {
    --el-menu-hover-bg-color: transparent;
    background: none;
    margin-left: 10%;
    margin-top: -1px;

    border: 0px;

}

.routerItem {
    margin-left: 10%;
    font-size: 23px;
}</style>